<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/jquery-3.3.1.min.js"></script>
    <title>Document</title>
    <script>
        $(function(){
            //内部插入=》子节点
            $(".append").click(function(){
                //所有子元素得后面
                // $("ul").append("<li>列表 append</li>");结果一样得
                $("<li>列表 append</li>").appendTo($("ul"));
            })
            $(".perpend").click(function(){
                //所有子元素得前面
                $("ul").append("<li>列表 perpend</li>");
            })
            
            //外部插入=>兄弟节点
            $(".before").click(function(){
                //所有子元素得前面
                $("ul").before("<li>列表 before</li>");
            })
            $(".after").click(function(){
                //所有子元素得后面
                $("ul").after("<li>列表 after</li>");
            })

            //包裹 =>父节点
            $(".wrap").click(function(){
                //所有子元素得后面
                $("ul").wrap("<div style='color:red'></div>");
            })
            //修改
            $(".replaceWith").click(function(){
                $("li:first").replaceWith("<li>列表 new</li>");
            })
            //清空把里面得子元素干掉了
            $(".empty").click(function(){
                $("li:first").empty();
            })
            //删除
            $(".remove").click(function(){
                $("li:first").remove();
            })

            //克隆
            $(".clone").click(function(){
                $("li:first").clone().appendTo($("ul"));
            })

            //on事件处理
            // $("li").click(function(){新加的加不上去
            //     console.log($(this).text())
            // })
            //$("ul").on("click","li",function(){
            //    console.log($(this).text())
            //})
            //dblclick绑定多个事件
            $("ul").on("click dblclick","li",function(){
                console.log($(this).text())
            })
            //

            //筛选
            // $("li:first");
            // $("li".first);
            // $("li:eq(2)");
            // $("li").eq(2);
            //查找find(e|o|e)  siblings([expr])  closest(e|o|e)
                

        })
    </script>
</head>
<body>
    <button class="append">append</button>
    <button class="perpend">perpend</button>
    <br>
    <button class="before">before</button>
    <button class="after">after</button>
    <br>
    <button class="wrap">wrap</button>
    <br>
    <button class="replaceWith">replaceWith</button>
    <br>
    <button class="empty">empty</button>
    <button class="remove">remove</button>
    <br>
    <button class="clone">clone</button>
    <ul>
        
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
    </ul>
</body>
</html>